{% if cart.item_count != 0 %}
<style>

	.minicart_list .order_discount {
		padding: 20px 0;
	}
	.minicart_list .order_discount .order_discount_form {
		display: flex;
	}
	.minicart_list .order_discount .order_discount_coupon_code {
		display: inline-flex;
		align-items: center;
		height: 38px;
		background: rgba(113, 113, 113, 0.11);
		margin-top: 15px;
		border-radius: 5px;
		padding: 0 10px;
		font-weight: bold;
	}
	.minicart_list .order_discount .order_discount_coupon_code > svg {
		margin-right: 5px;
		fill: #717171;
	}
	.minicart_list .order_discount .order_discount_coupon_code .close_coupon_code {
		display: block;
		width: 16px;
		height: 16px;
		margin-left: 10px;
		cursor: pointer;
	}
	.minicart_list .order_discount .order_discount_code_btn {
		margin-left: 10px;
		width: 90px;
		height: 46px;
		line-height: 46px;
		text-align: center;
		background: #c8c8c8;
		color: #fff;
		border: 0;
		border-radius: 5px;
	}
	.minicart_list .order_discount .order_discount_code_btn_on {
		background: #333;
		cursor: pointer;
	}
	.minicart_list .order_discount .order_text_box {
		width: calc(100% - 100px);
	}
	.minicart_list .order_text_box {
		position: relative;
	}
	.minicart_list .text_label {
		position: absolute;
		left: 0;
		top: 0;
		line-height: 44px;
		padding-left: 10px;
		color: #737373;
		font-size: 12px;
		cursor: pointer;
		-webkit-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out;
	}
	.minicart_list .top-border {
		border-color: #e32c2b;
		-webkit-box-shadow: 0 0 0 1px #e32c2b;
		box-shadow: 0 0 0 1px #e32c2b;
		border: none !important;
	}
	.minicart_list .tip {
		color: #e32c2b;
		margin-top: 5px;
	}
	.minicart_list .order_discount_form .order_text_box .text_label {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		box-sizing: border-box;
		padding: 0 10px;
	}
	.minicart_list .order_text {
		height: 46px;
		box-sizing: border-box;
		width: 100%;
		background: #fff;
		border: 1px solid #d9d9d9;
		text-indent: 10px;
		border-radius: 5px;
		-webkit-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out;
	}
	.minicart_list .order_text:focus {
		outline: none;
		border-color: #767676;
		-webkit-box-shadow: 0 0 0 1px #767676;
		box-shadow: 0 0 0 1px #767676;
	}
	.minicart_list .order_text_on .text_label {
		line-height: 28px;
	}
	.minicart_list .order_text_on .order_text {
		padding-top: 18px;
		line-height: 20px;
	}
	.minicart_list .cart_order_summary_wrapper {
		max-width: 37%;
		width: 100%;
	}
	.minicart_list .cart_list_coupon {
		display: flex;
		align-items: center;
	}
	.minicart_list .cart_list_coupon input[name=coupon_code] {
		width: calc(100% - 130px);
		height: 3.5rem;
		border: 0;
		background: #f6f6f6;
		text-indent: 10px;
		box-sizing: border-box;
	}
	.minicart_list .cart_list_coupon input[name=coupon_btn] {
		height: 3.5rem;
		line-height: 3.5rem;
		border: 0;
		background: #333;
		color: #fff;
		width: 120px;
		margin-left: 10px;
		font-size: 1.2rem;
	}
</style>

<form class="minicart_form" action="/cart" method="post" novalidate="">
		<div class="plugin-mini_cart-product_top"></div>
    <div class="minicart_list">
        <ul>
            {% for list in cart.items %}
            <li class="cart_list_content">
                <div class="product_info">
                    <a class="product_info_pic" style="position:relative;" href="/products/{{ list.product.handle }}?data_from={{data_from}}">
										{%- if list.product.image.alt == "" -%}
											{% assign product_alt = list.product | image_alt:'product'  %}
										{%- else -%}
												{% assign product_alt = list.product.image.alt %}
										{%- endif -%}
											<img  data-src="{{ list.image }}" alt="{{product_alt}}" src="{{ 'empty_loading.png' | public_asset_abs_url }}">
											  {% if list.log_src %}
													<img src="{{list.log_src}}"  style="position: absolute;bottom: 0;right: 0;background-color: #e8e8e8;width: 16px;height: 16px;border-radius: 50%;">
												{% endif %}
										</a>
                    <div class="product_info_info">
                        <a class="product_info_name" style="display: block;" href="/products/{{ list.product.handle }}?data_from={{data_from}}">{{ list.product.title }}</a>
												{% include 'product_sku_spu_show', className:"product_info_sku",style:"",spu:list.product.spu,sku:list.sku %}
                        {% unless list.product.has_only_default_variant %}
												{% for option in list.options_with_values %}
                        <div class="product_info_sku">
                            {{ option.name }}:&nbsp;{{ option.value }}
												</div>
												{% endfor %}
                        {% endunless %}

												{% include 'product_custom_option', customOption:list.property,isShowTiem:true %}

												<div class="product_total">
														<span style="margin-right: 5px;">{{ list.unit_price | money }}</span>
														{% if list.data_from == "app_limitedtimeoffer" and list.original_line_compare_at_price > 0 %}
															<span style="color:#888;text-decoration: line-through;">{{ list.original_line_compare_at_price | money }}</span>
														{% else %}
															<span class="{% if list.original_line_price > list.final_line_price %}show{% else %}hide{% endif %}" style="color:#888;text-decoration: line-through;">{{ list.original_price | money }}</span>
														{% endif %}

												</div>
                        <div class="cart_list_content_items">
                        	<div class="cart_qty_content">
															
															{%- if list.unmodifiable == 1 or list.unavailable == 1 -%}
															<div>x{{ list.quantity }}{%- if list.unavailable == 1 -%}<br /><span  style="color: #FF526C;">{{ lang.checkout.unavailable }}</span>{%- endif -%} </div>
															{%- else -%}
															<div class="minicart_qty" inventory_policy="{{ list.product.inventory_policy }}" inventory_tracking="{{ list.product.inventory_tracking }}" inventory_quantity="{{ list.variant.inventory_quantity }}">
																<a class="minicart_qty_minus" href="javascript:void(0);">
																	{% include icon_minus ,{width:'16',height:'16'} %}
																</a>
																<input class="minicart_qty_txt notranslate" type="text" name="minicart_qty" value="{{ list.quantity }}">
																<a class="minicart_qty_plus" href="javascript:void(0);">
																	{% include icon_plus ,{width:'16',height:'16'} %}
																</a>
															</div>
															{% endif %}


	                            {% if list.limit_quantity %}
															<div class="tip">{{ lang.general.stock }}: {{ list.variant.inventory_quantity }}</div>
															{% endif %}
	                        </div>
													<a class="cart_list_delete" href="javascript:void(0);">{% include "icon_close" ,width:'20',height:'20'%}</a>
                        </div>
                    
                    </div>
                </div>
            </li>
            {% endfor %}
        </ul>
				{% if storeConfig.coupon_use_range  == "cart" %}
					<div class="order_discount" data-type='minicart'>
						<div class="order_discount_form">
								<div class="order_text_box">
										<label class="text_label" for="use_coupon_code">{{ lang.checkout.coupon_code }}</label>
										<input class="order_discount_code order_text coupon_code_input" onkeydown="if(event.keyCode==13){}" type="text" name="coupon_code" value="" placeholder="" autocomplete="off" id="use_coupon_code">
								</div>
								<input class="order_discount_code_btn valide_coupon_btn" type="button" name="discount_code_btn" value="{{ lang.checkout.apply }}">
						</div>
						{% if cart.coupon_code %}
									<div class="order_discount_coupon_code">{% system_include icon_order_coupon ,{width:'18',height:'18'} %} <span id='coupon_code_span'>{{ cart.coupon_code }}</span><span class="close_coupon_code">{% system_include icon_close ,{width:'16',height:'16'} %}</span></div>
						{% endif %}
					</div>
				{% endif %}
    </div>
		<div class="plugin-mini_cart-product_bottom"></div>
    <div class="minicart_bom">
        <div class="minicart_price" style="margin-bottom:14px">
            <ul>                
                <li>
                    <span>{{ lang.cart.list.subtotal }}</span>
                    <span id="items_subtotal_price">{{ cart.items_subtotal_price | money }}</span>
                </li>

								{% if cart.coupon_price != 0 %}
									<li id="coupon_discount_box">
											<div class="name">{{ lang.checkout.coupon_discount }}</div>
											<div class="value" id="coupon_discount">{{ cart.coupon_price | money }}</div>
									</li>
								{% endif %}

								{%- capture style -%}
								{%- if cart.promotion_price == 0 -%}
										none
									{%- else -%}
										flex
								{%- endif -%}
								{%- endcapture -%}
								
								<li id="promotion_price_box" style="display: {{style}}">
                    <span>{{ lang.checkout.promotion_discount }}</span>
                    <span id="promotion_price">{{ cart.promotion_price | money }}</span>
                </li>
                

								<li>
                    <span>{{ lang.cart.list.total }}</span>
                    <span id="minicart_total_price">{{ cart.total_price | money }}</span>
                </li>
            </ul>
        </div>
						<div class="plugin-mini_cart-pay_top"></div>
        <div class="minicart_order_btn">
            {% if cart.has_out_of_stock %}
			<button class="minicart_checkout main_btn checkout_out_of_stock" type='submit' href="javascript:void(0);">{{ lang.cart.list.checkout }}</button>
			{% else %}
			<button class="minicart_checkout main_btn" type='submit' id="minicart_checkout" href="javascript:void(0);">{{ lang.cart.list.checkout }}</button>
			
                        {% if payment_form_html %}
                        <div class="minicart-payment" style="margin-top:14px" {% if cart.has_out_of_stock %}style="display:none;"{% endif %}>{{ payment_form_html }}</div>
                        {% endif %}
			{% endif %}


        </div>
        <div class="minicart_order_link" style="margin-top:14px">
						<div class="cart_mini_delete_all" style="cursor: pointer;" >
							{% include icon_delete , width:'20',height:'20' %}
						</div>
						<a class="links" href="/cart">{{ lang.cart.list.view_cart }}</a>
				</div>
						<div class="plugin-mini_cart-pay_bottom"></div>

    </div>

</form>


<script type="text/javascript">
	
	$(function(){
		var miniCartData = {{cart|json}};

		{% comment %} 本地缓存优惠券渲染  coupon_position 后台配置是否显示{% endcomment %}
		oemcartCouponRecord && oemcartCouponRecord('',miniCartData.coupon_code)

		moi.setPageStorage('miniCartInfo', miniCartData);
		var productList = miniCartData.items;
		var cartNodeList = $(".minicart_list .cart_list_content");
		

		for(let i=0;i<productList.length;i++){
				const cuurentTimer = productList[i].property.find(function(item){
					return item.type == "promotion_timer"
				})

				if(cuurentTimer){
					var timing = productList[i].ends_at - miniCartData.sys_time;
					if(timing > 0){
						moi.countdown(cartNodeList.eq(i).find(".cart-label-timer"),timing,function(){
								window.miniCart()
						})
						cartNodeList.eq(i).find(".cart-label-timer").show();
					}

				}
		}

		qty();
	
		var _h1 = $('.minicart_top').innerHeight();
		var _h2 = $('.minicart_bom').innerHeight();
		var _h = _h1 + _h2 + 2;
		$('.minicart_list').css('max-height','calc(100vh - '+ _h +'px)');
		$('.minicart .close_btn,.minicart').click(function(){
			$('.minicart').removeClass('minicart_on');
		});
		$('.minicart_wrapper').click(function(e){
			e.stopPropagation();
		})

		function getMiniCartChange(data,callback){
			moi.ajax({
						url:'/cart/change',
						type: 'POST',
						contentType: "application/json",
						data:JSON.stringify(data),
						dataType: 'json',
						success: function(res){
							callback && callback();
							var oldMinicart = moi.getPageStorage("miniCartInfo");
							if( oldMinicart && oldMinicart.items.length !==  res.data.items.length){
								miniCart();
								addCartNum();
							}
							moi.setPageStorage('miniCartInfo', res.data);
							moi.onEvent("miniCartChange",res.data);
	
							moi.onEvent("cartChange", res.data);
							moi.onEvent("cartPriceChange", {
                total_price:formatMoney(res.data.total_price,oemcart_currency,'',false,false)
            	})
							var price = res.data.total_price;
							$('#minicart_total_price').html(formatMoney(price, oemcart_currency));
							$('#items_subtotal_price').html(formatMoney(res.data.items_subtotal_price, oemcart_currency));
							$('#promotion_price').html(formatMoney(res.data.promotion_price, oemcart_currency));
							{% if storeConfig.coupon_use_range  == "cart" %}
							$('#coupon_discount').html(formatMoney(res.data.coupon_price, oemcart_currency));
							if(res.data.coupon_price == 0){
								$('#coupon_discount_box').hide();
								$(".order_discount_coupon_code").hide();
							}else{
								$(".order_discount_coupon_code").show().find("#coupon_code_span").html(res.data.coupon_code);
								$('#coupon_discount_box').show();
							}
							{% endif %}
							if(res.data.promotion_price == 0){
								$('#promotion_price_box').hide();
							}else{
								$('#promotion_price_box').show();
							}
							addCartNum();
							res.data.items.forEach(function(product,index){
								if(product.unmodifiable == 1 || product.unavailable == 1){
										var unavailableHtml = '';
										if(product.unavailable == 1){
											unavailableHtml = "<div style='color: #FF526C;'>"+lang.checkout.unavailable+"</div>"
										}
										$(".cart_list_content").eq(index).find('.cart_qty_content').html(`<div >x${product.quantity}${unavailableHtml}</div>`);	
								}
									if(product.limit_quantity == 1){
											var limitHtml = "<div class='tip' style='text-align: left;'>"+lang.general.stock+":"+product.variant.inventory_quantity+"</div>";
											if($(".cart_list_content").eq(index).find('.tip').length){
												$(".cart_list_content").eq(index).find('.tip').html(limitHtml)
											}else{
											$(".cart_list_content").eq(index).find('.cart_qty_content').append(limitHtml)
											}
								}else{
										$(".cart_list_content").eq(index).find('.tip').remove()
								}
							})
							if(res.data.has_out_of_stock){
								
								$('.minicart_checkout').removeAttr('id');
								$('.minicart_checkout').addClass('checkout_out_of_stock');
							}else{
								$('.minicart_checkout').attr('id','minicart_checkout');
								$('.minicart_checkout').removeClass('checkout_out_of_stock');
							}
						},
						beforeSend: function(){createAjaxLoading()},
						complete: function(){
							removeAjaxLoading()
						}
			})
		}
	
		function qty(){
			var minus = $('.minicart_qty_minus');
			var plus = $('.minicart_qty_plus');
			var qtyText = $('.minicart_qty_txt');
			var allDel = $('.cart_mini_delete_all');
			
			minus.click(function(){
				var _this = $(this);
				var _index = _this.parents('.cart_list_content').index();
				var line = parseInt(_index) + 1;
				var qtyVal = _this.siblings('.minicart_qty_txt').attr('value');
				if(qtyVal == ''){
					qtyVal = 1;
				}
				var inventory_policy = _this.parent().attr('inventory_policy');
				var inventory_tracking = _this.parent().attr('inventory_tracking');
				var inventory_quantity = _this.parent().attr('inventory_quantity');
				var newQtyVal;
				if(qtyVal >= 2 && qtyVal <= 999999){
					newQtyVal = parseInt(qtyVal) - 1;
					_this.siblings('.minicart_qty_txt').attr('value',newQtyVal);
				}else if(parseInt(qtyVal) > 999999){
					newQtyVal = 999999;
					_this.siblings('.minicart_qty_txt').attr('value','999999');
				}else{
					return false;
				}
		
				if(qtyVal > 1){
					moi.onEvent("cartMinus", productList[_index]);
					getMiniCartChange({'line':line,'quantity':newQtyVal})
				}
			})
	
	
	
	
	
			plus.click(function(){
				
				var _this = $(this);
				var _index = _this.parents('.cart_list_content').index();
				var line = parseInt(_index) + 1;
				var qtyVal = _this.siblings('.minicart_qty_txt').attr('value');
				if(qtyVal == ''){
					qtyVal = 1;
				}
				var inventory_policy = _this.parent().attr('inventory_policy');
				var inventory_tracking = _this.parent().attr('inventory_tracking');
				var inventory_quantity = _this.parent().attr('inventory_quantity');
				var newQtyVal;
	
				if(qtyVal >= 0 && qtyVal <= 999999){
					newQtyVal = parseInt(qtyVal) + 1;
					_this.siblings('.minicart_qty_txt').attr('value',newQtyVal);
				}else if(parseInt(qtyVal) > 999999){
					newQtyVal = 999999;
				}
				moi.onEvent("cartPlus", productList[_index]);
				getMiniCartChange({'line':line,'quantity':newQtyVal})
			})
			qtyText.keyup(function(){
				$(this)[0].value = $(this)[0].value.replace(/^(0+)|[^\d]+/g,'');
				if($(this)[0].value > 999999){
					$(this)[0].value = 999999;
				}
			})
			qtyText.blur(function(){
				if($(this).attr('value') == ""){
					$(this).attr('value','1');
				}
			})
			qtyText.change(function(){
				var _this = $(this);
				var _index = _this.parents('.cart_list_content').index();
				var line = parseInt(_index) + 1;
				var qtyVal = _this.attr('value');
				if(qtyVal == ''){
					qtyVal = 1;
				}
				var inventory_policy = _this.parent().attr('inventory_policy');
				var inventory_tracking = _this.parent().attr('inventory_tracking');
				var inventory_quantity = _this.parent().attr('inventory_quantity');
				var newQtyVal;
				if(parseInt(qtyVal) >= 0 && qtyVal <= 999999){
					newQtyVal = parseInt(qtyVal);
					_this.siblings('.minicart_qty_txt').attr('value',newQtyVal);
				}else if(parseInt(qtyVal) > 999999){
					newQtyVal = 999999;
				}
			
				getMiniCartChange({'line':line,'quantity':newQtyVal})
		
			})
	
			allDel.click(function () {
				moi.confirm({
					title: '{{lang.checkout.clear_cart}}',
					ok: function () {
						moi.ajax({
							url: '/cart/clean',
							type: 'POST',
							contentType: "application/json",
							dataType: 'json',
							success: function (res) {
								moi.onEvent("cartChange", {});
								moi.onEvent("clearCartAll");
								moi.setPageStorage('miniCartInfo', {});
								miniCart();
								addCartNum();
							},
							beforeSend: function () {
								createAjaxLoading()
							},
							complete: function () {
								removeAjaxLoading()
							}
						})
					}
				})
			})
			
			$('.minicart_form .cart_list_delete').click(function(){
				var _this = $(this);
				var _index = _this.parents('.cart_list_content').index();
				var line = parseInt(_index) + 1;
				getMiniCartChange({'line':line,'quantity':0},function(data){
						var cart = moi.getPageStorage("miniCartInfo");
						 
						_this.parents('.cart_list_content').remove();
						var item = cart.items[_index];
						var product = item.product;
						var variant = item.variant || product.variant;
						if (window.callback_add_to_cart) {
							var ec_data = {
								'ec_data_id': product['id'],
								'ec_data_from': '{{ data_from }}',
								'ec_data_quantity': item.quantity,
								'ec_data_name':  encodeURIComponent(product['title']),
								'ec_data_price': variant['price'],
								'ec_data_discount_price': variant['price'],
								'ec_data_spu': product['spu'],
								'ec_data_image': product['src'],
								'ec_data_category': product['product_type'],
								'ec_data_uniq_id': product['id'],
								'ec_data_sku': variant['sku'],
								'ec_data_sku_code': variant['sku_code'],
								'ec_data_sku_name': variant['sku_value'],
								'ec_currency_code': '{{ base_currency.standard_code }}',
								'ec_data_action_type': 'remove_from_cart'
							};
							callback_remove_from_cart(ec_data)
						}
				})
			})
		}


		$('.order_text_box .order_text').each(function () {
			if ($(this).attr('value') != '') {
					$(this).parents('.order_text_box').addClass('order_text_on');
			}
	});
	$('.order_text_box .order_text').focus(function () {
			$(this).parents('.order_text_box').addClass('order_text_on');
	});
	
	$(document).on('keydown', '.order_text_box .order_text', function () {

			$(this).parents('.order_text_box').addClass('order_text_on');
			$(this).removeClass('top-border');
			$(this).siblings('.tip').remove();
	});
	$(document).on('blur', '.order_text_box .order_text', function () {

			if ($(this).attr('value') == '') {
					$(this).parents('.order_text_box').removeClass('order_text_on');
			}
	})

	function discount() {
		$('#use_coupon_code').blur(function () {
				if ($(this).attr('value') == '') {
						$('.order_discount_code_btn').removeClass("order_discount_code_btn_on");
				}else{
						$('.order_discount_code_btn').addClass("order_discount_code_btn_on");

				}
		});
		$('#use_coupon_code').keydown(function () {
				$('.order_discount_code_btn').addClass("order_discount_code_btn_on");
		});
		$('.valide_coupon_btn').click(function () {
				if ($.trim($('.coupon_code_input').val()) == '') {
						return;
				}
				var codeobj = $('.coupon_code_input').val();
				var _this = $(this);
				//+codeobj
				moi.ajax({
						url: "/coupon/use/",
						type: 'GET',
						dataType: 'json',
						data: {
								code: codeobj
						},
						cache: false,
						success: function (res) {
								if (res.data.code != 0) {
										$('input[name="coupon_code"]').addClass('top-border');
										$(".coupons-record-item").removeClass("coupons-record-item-active");

										if (!$('input[name="coupon_code"]').siblings('.tip').length) {
												$('input[name="coupon_code"]').after('<p class="tip">' + res.data.msg + '</p>');
										} else {
												$('.tip').html(res.data.msg);
										}

										return;
								}
								else {
									miniCart();
								}
						},
						beforeSend: function () {
								createAjaxLoading();
						},
						complete: function () {
								removeAjaxLoading();
						}
				});
		});
		$('.close_coupon_code').click(function () {
				moi.ajax({
						url: "/coupon/cancel",
						type: 'DELETE',
						dataType: 'json',
						cache: false,
						success: function (res) {
								if (res.code == '0') {
									miniCart();
								}
						},
						beforeSend: function () {
								createAjaxLoading();
						},
						complete: function () {
								removeAjaxLoading();
						}
				});
		})
	}

	discount()

	if(miniCartData.coupon_use){
		moi.alertInfo({content:"{{lang.coupons.coupon_use}}",placement:"top",type:"success"})
		var result = miniCartData.coupon_use.result;
		if(result.code == -1){
			$('.coupon_code_input').parents('.order_text_box').addClass('order_text_on');
			$('.coupon_code_input').val(miniCartData.coupon_use.coupon_code)
			$('input[name="coupon_code"]').addClass('top-border');
			if (!$('input[name="coupon_code"]').siblings('.tip').length) {
					$('input[name="coupon_code"]').after('<p class="tip">' + result.msg + '</p>');
			} else {
					$('.tip').html(result.msg);
			}
		}
	}

	})




</script>
{% else %}
<div class="minicart_empty_content">
	<div class="cart_empty_svg">{% include icon_cart ,{width:'80',height:'80'} %}</div>
	<p>{{ lang.cart.list.your_shopping_cart_is_empty }}</p>
</div>
<script type="text/javascript">
$(function(){
	$('.minicart .close_btn,.minicart').click(function(){
			$('.minicart').removeClass('minicart_on');
		});
		$('.minicart_wrapper').click(function(e){
			e.stopPropagation();
		})
})
</script>
{% endif %}

